<template>
    <div id="thirdModule"></div>
</template>
<script>
import { removeStore } from '@/libs/storage';
import { getCountJyhy, getCountNlfb } from '@/api/chart/chart';

export default {
    data() {
        return {
            chart: '',
            data: []
        };
    },
    methods: {
        init() {
            this.chart = echarts.init(document.getElementById('thirdModule'));
            let x = [];
            let y = [];

            let color = ['rgb(70, 220, 134)', 'rgb(54, 78, 216)', 'rgb(255, 138, 0)', 'rgb(255, 197, 41)', 'rgb(72, 174, 255)'];

            this.data.forEach((item, index) => {
                x.push(item.name);
                y.push({
                    value: item.value,
                    itemStyle: {
                        color: color[index % 5]
                    }
                });
            });

            let option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: x,
                    axisTick: {
                        alignWithLabel: true
                    }
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: y,
                        type: 'bar'
                    }
                ]
            };

            this.chart.setOption(option);
        },
        async getXData() {
            // removeStore("tableName")
            const res = await getCountNlfb();
            if (res.success) {
                let data = res.result.map(e => {
                    return { value: e.yData, name: parseInt(e.xData) + '岁' };
                });
                this.data = Object.freeze(data);
            }
            console.log(this.data);
        }
    },
    async mounted() {
        await this.getXData();
        this.init();
    }
};
</script>

<style scoped lang="less">
#thirdModule {
    width: 100%;
    height: 300px;
    transform: translateY(-0.2rem);
}
</style>
